let myQueue = []; //利用数组来实现 队列数据结构
let pending = false;
let timerFunc;
//当前需要执行队列中的方法
function flush() {
  myQueue.forEach((cb) => cb());
  pending = false; //重置到开始
}

// 处理兼容问题--是否执行Promise---之前使用setTimeout 现在也可以使用Promise.then()来实现异步代码
if (Promise) {
  timerFunc = () => {
    Promise.resolve().then(flush); //异步执行，和之前的setTimeOut效果差不多
  };
} else if (MutationObserver) {
  // 对不支持Promise的--使用H5异步方法 他可以监听DOM变化，监控完毕之后在来异步更新
  let observe = new MutationObserver(flush);
  let textNode = document.createTextNode(1); //创建文本
  observe.observe(textNode, { characterData: true }); // 观察文本的内容
  timerFunc = () => {
    textNode.textContent = 2;
  };
}

export function nextTick(cb) {
  // cb==》是回调函数
  console.log(cb, "cb--nextTick");
  //列队 处理，1. 第一个得到cb 的是vue自己的flushWatcher函数（功能：数据更新-视图也更新）2. 后续得到的cb都是用户自己在 不同组件内 调用的cb自己回调函数。
  // 所以 我们要实现 先执行vue自己内部的flushWatcher函数---以便视图更新-获取最新的dom
  // 后续在执行 用户自己所写的函数--这样就可以在用户自己写的 cb内获取最新的dom。
  // [cbVue1,cb2,cb3]
  myQueue.push(cb);
  //继续使用 防抖--一个函数在规定时间内多次触发，只在最后一次执行这个函数
  if (pending == false) {
    //执行顺序2 异步代码
    // Promise.then() vue3
    timerFunc(); // 这个方法就是2.异步方法--但是处理兼容问题
    pending = true; //执行顺序 1 同步代码
  }
}
